<template>
    <div class="shadow-[0px_2px_8px_0px_#0F172A0A] bg-[#fff]  rounded-[1.25rem] border border-[#F3F4F6] p-[1rem] mb-[1.5rem] flex flex-col gap-[1rem]">
        <div class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000] flex items-center gap-[0.5rem] flex justify-between">
            <div class="flex items-center gap-[0.5rem]">
                <img src="/public/icon/horn.png" class="w-[1rem] h-[1rem]" />
                <span>活动公告</span>
            </div>
            <div class="flex items-center gap-[0.5rem] py-[3px]">
                <img src="/public/icon/arrow-left.png" class="w-[0.625rem] h-[1.25rem] cursor-pointer" @click="handlePrev" />
                <img src="/public/icon/arrow-left.png" class="w-[0.625rem] h-[1.25rem] cursor-pointer transform rotate-180" @click="handleNext" />
            </div>
        </div>

        <div class="flex gap-[1rem] pb-[0.5rem]">
            <div v-for="item in data" :key="item.title" class="flex flex-col items-start relative cursor-pointer">
                <span class="absolute w-[3.25rem] h-[1.5rem] top-[0.5rem] right-[0.5rem] flex items-center justify-center rounded-[99px] text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#FFFFFF]  py-[0.25rem] px-[0.5rem]" :class="getColor(item.status)">{{ item.status }}</span>
                <img :src="item.image" class="w-[12rem] h-[6rem] rounded-[0.5rem] mb-[0.25rem] object-cover" />
                <span class="text-[0.875rem] font-[Inter] font-500 leading-[1.25rem] text-[#000000]">{{ item.title }}</span>
                <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ item.description }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, computed } from 'vue';
    const getColor = (status: string) => {
        if (status === '进行中') {
            return 'bg-[#EF4444]';
        }
        if (status === '报名中') {
            return 'bg-[#22C55E]';
        }
        if (status === '新活动') {
            return 'bg-[#3B82F6]';
        }
    }
    // 模拟完整数据
    const allData = ref([
        {   
            image: '/public/images/notice_test.png',
            title: '年度优质创作者评选',
            description: '参与评选，赢取丰厚奖励',
            status: '进行中',
        },
        {
            image: '/public/images/notice_test.png',
            title: '每周优质内容评选',
            description: '3天后截止',
            status: '报名中',
        },
        {
            image: '/public/images/notice_test.png',
            title: '新人创作扶持计划',
            description: '加入即可领取福利',
            status: '新活动',
        },
        {
            image: '/public/images/notice_test.png',
            title: '创作者激励计划',
            description: '创作有奖',
            status: '进行中',
        },
        {
            image: '/public/images/notice_test.png',
            title: '月度之星评选',
            description: '每月评选优秀创作者',
            status: '报名中',
        },
        {
            image: '/public/images/notice_test.png',
            title: '社区活动征集',
            description: '分享你的创意',
            status: '新活动',
        },
        {
            image: '/public/images/notice_test.png',
            title: '创作者成长计划',
            description: '助力创作者成长',
            status: '进行中',
        },
        {
            image: '/public/images/notice_test.png',
            title: '优质内容奖励',
            description: '好内容有好报',
            status: '报名中',
        }
    ]);

    const currentPage = ref(1);
    const pageSize = 3;
    const totalPages = Math.ceil(allData.value.length / pageSize);

    // 计算当前页的数据
    const data = computed(() => {
        const start = (currentPage.value - 1) * pageSize;
        const end = start + pageSize;
        return allData.value.slice(start, end);
    });

    const handlePrev = () => {
        if (currentPage.value > 1) {
            currentPage.value--;
        }
    }

    const handleNext = () => {
        if (currentPage.value < totalPages) {
            currentPage.value++;
        }
    }
</script>
<style scoped lang="scss">

</style>
